<template>
  <el-container class="index_box">
    <el-header>
      <!-- <img src="@/assets/icon/side.svg" class="sideIcon" /> -->
      <span class="title">{{ title }}</span>
      <div class="user" v-if="usershow">
        <el-dropdown>
          <span>欢迎：{{ user }}</span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item><p @click="exit()">退出登录</p></el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="user" v-else @click="login">点击登录</div>
    </el-header>

    <el-header height="30px" class="header2">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{ pagename }}</el-breadcrumb-item>
      </el-breadcrumb>
    </el-header>

    <el-container>
      <el-aside width="220px" class="aside">
        <img src="@/assets/logo.png" width="200" style="margin-bottom: 20px" />
        <el-menu :default-openeds="['1', '2', '3']">
          <el-submenu index="1">
            <template slot="title"
              ><i class="el-icon-search">地址匹配</i></template
            >
            <el-menu-item @click="toAddress_match">地址匹配搜索</el-menu-item>
            <el-menu-item @click="toMatch_record">历史匹配记录</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"
              ><i class="el-icon-folder-opened">文件管理</i></template
            >
            <el-menu-item @click="toFile_training">文件管理</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"
              ><i class="el-icon-user-solid">用户管理</i></template
            >
            <el-menu-item @click="toAccount_password">修改信息</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main><router-view></router-view></el-main>
    </el-container>
  </el-container>
</template>
<script>
export default {
  data() {
    return {
      title: "智能地址识别系统",
      user: "",
      usershow: false,
      pagename: "地址匹配搜索",
    };
  },
  name: "Index",
  methods: {
    exit() {
      sessionStorage.clear();
      this.$router.push({ path: "/login" });
    },
    toAddress_match() {
      this.pagename = "地址匹配搜索";
      this.$router.push({ path: "/address_match" });
    },
    toMatch_record() {
      this.pagename = "历史匹配搜索";
      this.$router.push({ path: "/match_record" });
    },
    toFile_training() {
      this.pagename = "文件管理";
      this.$router.push({ path: "/file_training" });
    },
    toAccount_password() {
      this.pagename = "修改信息";
      this.$router.push({ path: "/account_password" });
    },
    async getUserMsg() {
      var param = new FormData();
      param.append("token", window.sessionStorage["token"]);
      const { data: res } = await this.$http.post("getuser", param);
      this.user = res.data.name;
    },
    login() {
      this.$router.push({ path: "/login" });
    },
  },
  mounted() {
    if (window.sessionStorage["token"] != null) {
      this.usershow = true;
    }
    this.getUserMsg();
  },
};
</script>

<style>
.title {
  color: #3b3a3a;
  font-weight: 800;
}
.sideIcon {
  border: 1px solid red;
  color: black;
}
.el-header {
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #65686b;
  font-size: 20px;
}
.header2 {
  box-shadow: 0 1px 4px rgb(0 21 41 / 20%);
  justify-content: left;
  margin-left: 13.2rem;
}
.el-button {
  position: relative;
  left: 40%;
}
.user {
  position: relative;
  left: 40%;
  font-size: 12px;
  cursor: pointer;
}
.el-aside,
.el-aside * {
  background-color: rgb(48, 65, 86) !important;
  color: white !important;
}
.el-menu {
  border-right: none !important;
}
.el-main {
  background-color: #e9eef3;
  padding: 0 !important;
}
.index_box {
  height: 100vh;
}

.aside {
  z-index: 9999999;
  position: fixed;
  padding-top: 30px;
  top: 0;
  left: 0;
  bottom: 0;
}

.el-menu {
  border-right: null !important;
}
</style>